import { lazy, Suspense, useState, useEffect } from 'react'
import { BrowserRouter, useRoutes } from 'react-router-dom'
import { ConfigProvider, FloatButton } from 'antd'
import { useBoolean } from 'ahooks'
import zhCN from 'antd/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import Loading from '../Currency/Loading'
import { project } from '../Data'

import { SwapOutlined } from '@ant-design/icons'
import { ModalBox } from '../Modal/ModalBox'
import { FrontRouter } from './FrontRouter'
import { VersionTips } from './MenuNav/DiyList/VersionTips'
import { Single } from './MenuNav/DiyList/Single'

import { Voice } from './Voice'

dayjs.locale('zh-cn')

// 通用页面
const Login = lazy(() => import('../Login'))
const NO404 = lazy(() => import('../Currency/404'))
const Admin = lazy(() => import('../../Pages/Admin/Admin'))
const MapPage = lazy(() => import('../../Pages/Admin/Other/MapPage'))
const CodePage = lazy(() => import('../../Pages/Admin/Other/CodePage'))
const CameraPage = lazy(() => import('../../Pages/Admin/Other/CameraPage'))
const SceneMap = lazy(() => import('../../Pages/Admin/Other/SceneMap'))

// 判断大屏路由
const { hostname, pathname } = window.location
const { client_id } = project[hostname]

const VoiceList = ['jtgj.ljkjkf.com']

const RouterList = {
    jtgj: {
        router: FrontRouter,
    },
}
// 路由
const Router = [
    // 定义页面路径
    { path: '/', element: <Login /> },
    { path: '*', element: <NO404 /> },
    { path: 'Admin', element: <Admin /> },
    { path: 'MapPage', element: <MapPage /> },
    { path: 'VersionTips', element: <VersionTips /> },
    { path: 'Qrcode/:uuid', element: <CodePage /> },
    { path: 'Single', element: <Single /> },
    { path: 'CameraPage', element: <CameraPage /> },
    { path: 'SceneMap', element: <SceneMap /> },
    hostname !== 'localhost' && RouterList[client_id].router,
]

const Main = () => {
    const App = () => useRoutes(Router)
    const [EdiTionState, { setFalse }] = useBoolean(true)
    const [OptionsCall, setOptionsCall] = useState()
    useEffect(() => {
        const MinimumVersion = { Chrome: 93, Safari: 530, Firefox: 92, Opera: 80 }
        const { userAgent } = window.navigator
        const webList = userAgent
            .split(' ')
            .filter(v => v.indexOf('/') !== -1 && v.indexOf('Mozilla') === -1 && v.indexOf('AppleWebKit') === -1)
        const editionData = webList.map(key => ({ [key.split('/')[0]]: parseInt(key.split('/')[1]) }))
        editionData.forEach(key => {
            const [type] = Object.keys(key)
            const [edition] = Object.values(key)
            if (edition <= MinimumVersion[type]) setFalse()
        })
    }, [setFalse])

    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter>
                <Suspense fallback={<Loading color={{ background: RouterList[client_id]?.background }} />}>
                    {EdiTionState ? <App /> : <VersionTips />}
                </Suspense>
                {VoiceList.includes(window.location.hostname) && pathname !== '/' && <Voice />}
            </BrowserRouter>
            {window.location.port && (
                <FloatButton
                    shape="circle"
                    type="primary"
                    style={{ right: 24, bottom: 24 }}
                    icon={<SwapOutlined />}
                    tooltip={<div>切换项目</div>}
                    onClick={() =>
                        setOptionsCall({ type: 'SwitchProjects', data: { title: '切换项目', width: 600, project } })
                    }
                />
            )}
            <ModalBox OptionsCall={OptionsCall} />
        </ConfigProvider>
    )
}
export default Main
